<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>StreamACon Live and OnDemand Conference Streaming</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/index.css">
    <link rel="shortcut icon " type="images/x-icon" href="images/favicon.ico"> </head>
    <link rel="stylesheet" href="css/font-awesome.min.css">

<body>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light w-100"> <a class="navbar-brand" href="">StreamACon</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav w-100 justify-content-end">
                    <li class="nav-item active"> <a class="nav-link" href="">HOME <span class="sr-only">(current)</span></a> </li>
                    <li class="nav-item"> <a class="nav-link" href="#">EVENTS</a> </li>
                    <li class="nav-item"> <a class="nav-link" href="#">VIDEOS</a> </li>
                    <li class="nav-item"> <a class="nav-link" href="#">CONTACT</a> </li>
                    <li class="nav-item"> <a class="nav-link" href="#">LOGIN</a> </li>
                </ul>
            </div>
        </nav>
        <div class="warp">
            <div class="card text-center w-100">
                <div class="card-body">
                    <h1 class="card-title">Streaming Conferences</h1>
                    <h1 class="card-title lan">On Your Time!</h1>
                    <p class="card-text">Streaming Live and Demand!</p> <a href="" class="btn btn-primary mt-4">REGISTER FOR AN ACCUNT!</a></div>
            </div>
        </div>
    </header>
    <div class="main mt-5">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="biao">
                        <h2 class="text-center">Streaming Conferences Live and OnDemand!</h2> </div>
                </div>
                <div class="col-md-4 text-center mt-4">
                    <div class="box"> <img src=images/exam1.png alt="">
                        <h3 class="mt-1 mb-3">WATCH WHEN YOU WANT</h3>
                        <p>Purchase an event and get access to the event live (if available) or on demand!</p>
                    </div>
                </div>
                <div class="col-md-4 text-center mt-4">
                    <div class="box"> <img src=images/exam2.png alt="">
                        <h3 class="mt-1 mb-3">WATCH WHERE YOU WANT</h3>
                        <p>Streaming available for Computer Screens, Mobile Devices and soon set-top devices.</p>
                    </div>
                </div>
                <div class="col-md-4 text-center mt-4">
                    <div class="box"> <img src=images/exam3.png alt="">
                        <h3 class="mt-1 mb-3">WATCH AS OFTEN AS YOU WANT</h3>
                        <p>Watch the stream live or watch ondemand videos as often as you like.</p>
                    </div>
                </div>
            </div>
            <div class="laracon">
                <div class="row">
                    <div class="col-md-8">
                        <div class="img"> <img src="images/laracon.jpg" alt=""> </div>
                    </div>
                    <div class="col-md-4">
                        <div class="text">
                            <h2>Laracon US</h2>
                            <p class="mt-4 mb-4">We're proud to announce that Laracon Us was our first conference!</p> <a href="" class="button">Learn More About Laracon</a>
                            <button>go</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="stre w-100 text-center"> <img src="images/stre.png" alt="">
            <h2 class="mt-2 mb-3">STREAMACON IS IN BETA!</h2>
            <p>We are building out our app and accepting conferences via invite.</p> <a href="">Contact us for pricing and availability!</a> </div>
    </div>
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <h4>STREAMACON.COM</h4>
                    <p>StreamACon is a streaming platform for live and ondemand vieweing of conferences. We help conferences increase their viewership and increase their bottom line to keep delivering valuable information.</p>
                    <ul class="mt-5">
                        <li><i class="fa fa-twitter-square"></i> <i class="fa fa-facebook"></i></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h6>QUICK LINKS</h6>
                    <div class="row">
                        <div class="col-md-6">
                            <ul>
                                <li><a href="">Upcoming Events</a></li>
                                <li><a href="">Contact Us</a></li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <ul>
                                <li><a href="">Register</a></li>
                                <li><a href="">Forum</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <h4>HACKNEY ENTERPRISES, INC.</h4>
                    <p> © Copyright © 2017 Hackney Enterprises, Inc. All Rights Reserved.</p>
                </div>
            </div>
        </div>
    </footer>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="./jquery-3.3.1.min.js"></script>
    <script>
       window.onscroll=function(){ 
			let nav=document.querySelector("nav")
			if(document.body.scrollTop > 30 || document.documentElement.scrollTop > 30){
				
				nav.classList.add("ative")
			}else{
				nav.classList.remove("ative")
			}
		}
    </script>
</body>

</html>